<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>

<style>
.div-a{ position:absolute; left:0px; top:0px; width:100%; height:50px}
</style>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
 <link href="css/my.css" rel="stylesheet"> 
<script src="js/bootstrap.js"></script>
<script src="js/jquery-2.2.3.min.js"></script> 

<script href="js/img.js"></script>

<script  href="js/gotoTop.js"></script>

<script>
function dotxt(){
var request=null;
if(window.XMLHttpRequest){request=new XMLHttpRequest();}else if(window.ActiveXObject){request=new ActiveXObject("Microsoft.XMLHTTP");}
if(request){
request.open("GET","aaa.txt",true);
request.onreadystatechange=function(){
if(request.readyState===4){
if (request.status == 200 || request.status == 0){
var tem='<div></div>';
var str = request.responseText.split("\n");
for(var a=0;a<str.length-2;a++){
var strarr = str[a].split(" ");

		tem+=' <div class="bloglist"><h2><a href="'+strarr[0] +'">'+ strarr[1]+'</a></h2><p>'+strarr[2] +'</p></div>';
}
document.getElementById("blogs").innerHTML = tem;

}
}
}
request.send(null);
}else{
alert("error");
}
}

function goPage(pno,psize){
  var itable = document.getElementById("vv");
  var num = itable.rows.length;//表格所有行数(所有记录数)
  console.log(num);
  var totalPage = 0;//总页数
  var pageSize = psize;//每页显示行数
  //总共分几页
  if(num/pageSize > parseInt(num/pageSize)){
      totalPage=parseInt(num/pageSize)+1;
    }else{
      totalPage=parseInt(num/pageSize);
    }
  var currentPage = pno;//当前页数
  var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
    var endRow = currentPage * pageSize;//结束显示的行  40
    endRow = (endRow > num)? num : endRow;  //40
    console.log(endRow);
    //遍历显示数据实现分页
  for(var i=1;i<(num+1);i++){
    var irow = itable.rows[i-1];
    if(i>=startRow && i<=endRow){
      irow.style.display = "block";
    }else{
      irow.style.display = "none";
    }
  }
  var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  if(currentPage>1){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
  }else{
    tempStr += "首页";
    tempStr += "<上一页";
  }
  if(currentPage<totalPage){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}

window.onload = dotxt;

</script>


</head>
<body>
<div id ="aaa">
    
        <!-- Brand and toggle get grouped for better mobile display -->
        
            
          <h1>  kbing <small>个人博客</small></h1>
        

   
    </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
     <div id="abc">
                <ul class="nav nav-pills">
                  <li role="presentation" class="active"><a  href="#">Home</a></li>
                  <li role="presentation"><a  href="#">about</a></li>
                  <li role="presentation"><a    href="#">tags</a></li>
                </ul>
                 

                  
                </div>
          
        
    
    <!-- /.container -->
<div id="frame">
      <div id="photos">
        <img id="img1" src="images/hadoop.jpg">
        <img id="img2" src="images/tensorflow.png">
        <img id="img3" src="images/python.jpg">
      </div>
	 
      <a href="javascript:;" class="box-1" id="move1">1</a>
     <a href="javascript:;"class="box-1" id="move2">2</a>
     <a href="javascript:;" class="box-1" id="move3">3</a>
  </div>

<div class="box">



  <div class="sboxa"> <span class="label label-primary">hadoop</span>
    <h2>分布式系统基础框架</h2>
    <p>Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
						用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。</p>
    <a href="/" class="subread">点击阅读</a> </div>
  <div class="sboxb"> <span class="label label-success">tensorflow</span>
    <h2>数据流编程的符号数学系统</h2>
    <p>TensorFlow™是一个基于数据流编程（的符号数学系统，被广泛应用于各类机器学习（machine learning）算法的编程实现，其前身是谷歌的神经网络算法库</p>
    <a href="/" class="subread">点击阅读</a> </div>
  <div class="sboxc"> <span class="label label-warning">python爬虫</span>
    <h2>按要求获取网络数据</h2>
    <p>网络爬虫，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫。</p>
    <a href="#" class="subread">点击阅读</a> </div>




  <div class="blank"></div>

  <div id="blogs">
    <div class="bloglist">
      <h2><a href="#" title="程序员请放下你的技术情节，与你的同伴一起进步">程序员请放下你的技术情节，与你的同伴一起进步</a></h2>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作</p>
    </div>

    <div class="bloglist">
      <h2><a href="#" title="个人博客，我为什么要用帝国cms？">个人博客，我为什么要用帝国cms？</a></h2>
      <p>选择帝国cms，做一个博客系统，很多人都说是大材小用。确实是有那种感觉，因为cms有很多功能表用不上。但是帝国cms的安装包也就才6M，如果你放一张高清的1920的图，都比这安装包大！我就来说一说我为什么要用帝国cms。</p>
    </div>
    <div class="bloglist">
      <h2><a href="#" title="个人博客，属于我的小世界！">个人博客，属于我的小世界！</a></h2>
      <p>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。</p>
    </div>
    <div class="bloglist">
      <h2><a href="#" title="程序员请放下你的技术情节，与你的同伴一起进步">程序员请放下你的技术情节，与你的同伴一起进步</a></h2>
      <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话， 那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作</p>
    </div>
    <div class="bloglist">
      <h2><a href="#" title="个人博客，我为什么要用帝国cms？">个人博客，我为什么要用帝国cms？</a></h2>
      <p>选择帝国cms，做一个博客系统，很多人都说是大材小用。确实是有那种感觉，因为cms有很多功能表用不上。但是帝国cms的安装包也就才6M，如果你放一张高清的1920的图，都比这安装包大！我就来说一说我为什么要用帝国cms。</p>
    </div>
    <div class="bloglist">
      <h2><a href="#" title="个人博客，属于我的小世界！">个人博客，属于我的小世界！</a></h2>
      <p>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。</p>
    </div>
  </div>
  <aside>
    
   
    <div class="paihang">
      <h2>站长推荐</h2>
      <ul>
        <li><a href="#" target="_blank" title="个人博客，属于我的小世界！">个人博客，属于我的小世界！</a></li>
        <li><a href="#" target="_blank" title="作为一个设计师,如果遭到质疑你是否能恪守自己的原则?">作为一个设计师,如果遭到质疑你是否能恪守自己的原则</a></li>
        <li><a href="#" target="_blank" title="Come on,行动起来吧!我们和时间来一场赛跑!">Come on,行动起来吧!我们和时间来一场赛跑!</a></li>
        <li><a href="#" target="_blank" title="或许换一个活法,能让你走出阴霾">或许换一个活法,能让你走出阴霾</a></li>
        <li><a href="#" target="_blank" title="即便是坑，我也想要拉你入伙！">即便是坑，我也想要拉你入伙！</a></li>
        <li><a href="#" target="_blank" title="女程序员职业生涯该如何发展？">女程序员职业生涯该如何发展？</a></li>
        <li><a href="#" target="_blank" title="个人博客，属于我的小世界！">个人博客，属于我的小世界！</a></li>
        <li><a href="#" target="_blank" title="作为一个设计师,如果遭到质疑你是否能恪守自己的原则?">作为一个设计师,如果遭到质疑你是否能恪守自己的原则</a></li>
        <li><a href="#" target="_blank" title="女程序员职业生涯该如何发展？">女程序员职业生涯该如何发展？</a></li>
      </ul>
    </div>
    <div class="paihang">
      <h2>其它个人主页</h2>
      <ul>
        <li><a href="http://kbing.github.io">github博客</a></li>
        <li><a href="https://blog.csdn.net/qq_41837900">CSDN博客</a></li>
        <li><a href="http://www.yangqq.com">新浪微博</a></li>
      </ul>
    </div>
  </aside>
</div>
<footer>
 
	<div class="container">  
		<p class="footer-class">Blog &copy; 2018.Blog blong to lkinga.More info <a href="https://gitee.com/lkinga" target="_blank">码云主页</a></p>
	</div>


</footer>
<div id="goToTop"><a  href="javascript:;" id = "#goToTop a" ><span class="glyphicon glyphicon-chevron-up" href="javascript:;" id = "#goToTop a"></span></a></div>

</body>
</html>
